<!-- Portfolio Grid Section -->
    <section id="speakers" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Speakers</h2>
                    <h3 class="section-subheading text-muted"></h3>
                </div>
            </div>
            <div class="row">
            {% for post in site.categories.2017_speakers %}
                <div class="col-md-4 col-sm-6 speakers-item">
                    <a href="#{{ post.name }}" class="speakers-link" data-toggle="modal">
                        <div class="speakers-hover">
                            <div class="speakers-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="../css/2017_style/img/speaker/{{ post.thumbnail }}" class="img-responsive img-centered" alt="">
                    </a>
                    <div class="speakers-caption">
                        <h4>{{ post.title }}</h4>
                        <p class="text-muted">{{ post.subtitle }}</p>
                    </div>
                </div>
            {% endfor %}
            </div>
            <p>Visit 2016's page.</p>
            <center><a href="/2016" class="page-scroll btn btn-xl">Visit Now</a></center>
        </div>
    </section>